<template>
  <div class="dashboard-container">
    <!-- 分类,标题开始 -->
    <el-row class="subject-classification">
    	<el-row>
    		<span class="grid-content-span" style="width: 15%; justify-content: left;">科目分类：</span>
    		<el-col :span="8">
    			<div class="grid-content bg-purple">
    				<template>
    					<el-select @change="queryTwoLevel(ruleForm.question_parentid)" v-model="ruleForm.question_parentid" placeholder="一级分类">
    						<el-option v-for="item in oneLevel" :key="item.id" :label="item.cat_name" :value="item.id"></el-option>
    					</el-select>
    				</template>
    			</div>
    		</el-col>
    		<el-col :span="8">
    			<div class="grid-content bg-purple-light">
    				<template>
    					<el-select @change="queryThreeLevel(ruleForm.question_secondid)" v-model="ruleForm.question_secondid" placeholder="二级分类">
    						<el-option v-for="item in twoLevel" :key="item.id" :label="item.cat_name" :value="item.id"></el-option>
    					</el-select>
    				</template>
    			</div>
    		</el-col>
    		<el-col :span="8">
    			<div class="grid-content bg-purple">
    				<template>
    					<el-select v-model="ruleForm.question_catid" placeholder="三级分类">
    						<el-option v-for="item in threeLevel" :key="item.id" :label="item.cat_name" :value="item.id"></el-option>
    					</el-select>
    				</template>
    			</div>
    		</el-col>
    	</el-row>
    	<!-- 标题 -->
    	<el-row>
    		<el-col :span="24">
    			<div class="grid-content bg-purple-dark">
    				<span class="grid-content-span" style="width: 14%;">标题：</span>
    				<el-input v-model="ruleForm.question_title" placeholder="请输入标题"></el-input>
    			</div>
    		</el-col>
    	</el-row>
    </el-row>
    <!-- 分类,标题结束 -->
    <!-- 科目名称,搜索,重置开始 -->
    <el-row class="subject-name">
    	<el-row>
    		<el-col :span="12">
    			<div class="grid-content bg-purple">
    				<span class="grid-content-span">科目名称：</span>
    				<el-input v-model="ruleForm.question_subjectTitle" placeholder="请输入科目名称"></el-input>
    			</div>
    		</el-col>
    		<el-col :span="12">
    			<div class="grid-content bg-purple-light">
    				<el-button type="primary" @click="search">搜索</el-button>
    				<el-button type="primary" @click="reset">重置</el-button>
    				<el-button type="primary" @click="$router.push('/modelTestAdd')" style="margin-left: 37%; width: 15%;">添加</el-button>
    			</div>
    		</el-col>
    	</el-row>
    </el-row>
    <!-- 科目名称,搜索,重置结束 -->
    <!-- 表格部分开始 -->
    <el-row class="Formsection">
    	<template>
    		<el-table :data="list" border style="width: 100%">
    			<el-table-column prop="ID" label="ID" width="160">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column prop="chapter" label="标题" width="400">
            <template slot-scope="scope">{{ scope.row.question_title }}</template>
          </el-table-column>
          <el-table-column prop="Questionbank" label="考试时间">
            <template slot-scope="scope">{{ scope.row.test_totalTime }}</template>
          </el-table-column>
          <el-table-column prop="category" label="题目数量">
            <template slot-scope="scope">{{ scope.row.question_scoreTotal }}</template>
          </el-table-column>
          <el-table-column prop="Chaptertitle" label="总分">
            <template slot-scope="scope">{{ scope.row.question_titleNum }}</template>
          </el-table-column>
          <el-table-column prop="subject" label="科目">
            <template slot-scope="scope">{{ scope.row.subject_name }}</template>
          </el-table-column>
    			<el-table-column label="操作">
    			    <template slot-scope="scope">
    					<el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
    					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    			    </template>
    			</el-table-column>
    		</el-table>
    	</template>
    </el-row>
    <!-- 表格部分结束 -->
    <!-- 分页开始 -->
    <el-row>
    	<div class="block">
    		<el-pagination
    		  @size-change="handleSizeChange"
    		  @current-change="handleCurrentChange"
    		  :current-page="currentPage4"
    		  :page-sizes="[10, 20, 30, 40, 50]"
    		  :page-size="10"
    		  layout="total, sizes, prev, pager, next, jumper"
    		  :total="total">
    		</el-pagination>
    	  </div>
    </el-row>
    <!-- 分页结束 -->
  </div>
</template>

<script>
  import {cateComList, schooList, adminComList, schoolAjax, schoolDel} from "@/api/menu";
  import {examList, examDel} from "@/api/Question_bank_management";
  import {getInfo} from "@/api/user";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        input: '',
        total: null,
        list: [],
        value: '',
        ruleForm: {
          question_typeid: '',
          question_parentid: '',
          question_secondid: '',
          question_catid: '',
          question_subjectTitle: '',
          question_title: ''
        },
        currentPage1: 4,
        currentPage2: 3,
        currentPage3: 2,
        currentPage4: 1,
        oneLevel: [],
        twoLevel: [],
        threeLevel: []
      }
    },
    computed: {
      ...mapGetters([
        'id'
      ]),
    },
    mounted() {
      this.getOneLevel()
      this.getInformation()
    },
    filters: {

    },
    methods: {
      /**
       * 获取用户信息
       */
      getInformation() {
        getInfo().then(response => {
          console.log(response);
          this.group_title = response.data.group_title
          this.adminId = response.data.id
          this.getOrganList(this.adminId)
          console.log(response.data.id);
        })
      },
      /**
       * 列表
       */
      getOrganList() {
        examList({
          "question_adminId": this.id,
          "question_typeid": '1',
          "question_parentid": this.ruleForm.question_parentid,
          "question_secondid": this.ruleForm.question_secondid,
          "question_catid": this.ruleForm.question_catid,
          "question_subjectTitle": this.ruleForm.question_subjectTitle,
          "question_title": this.ruleForm.question_title,
          "page": this.ruleForm.page,
          "page_size": this.ruleForm.page_size,
        }).then(response => {
          console.log(response);
          this.list = response.data.data_list;
          this.total = response.data.total;
        })
      },
      /**
       * 获取列表单条信息
       * @param index
       * @param row
       */
      handleUpdate(index, row) {
        console.log(row);
        this.$router.push({path: '/modelTestEdit', query: {id: row.id}});
        this.getInfo(row.id);
      },
      /**
       * 重置
       */
      reset() {
        this.ruleForm = {};
        this.getOrganList();
      },
      /**
       * 搜索
       */
      search() {
        this.getOrganList(this.ruleForm)
      },
      /**
       * 查询二级数据
       */
      queryTwoLevel(value) {
        console.log(value);
        this.ruleForm.secondid = '';
        this.ruleForm.catid = '';
        cateComList({
          cate_parentid: value,
          cate_secondid: 0
        }).then(response => {
          console.log(response);
          this.twoLevel = response.data
          this.twoLevel.unshift({id: "", cat_name: "请选择"})
        })
      },
      /**
       * 查询三级数据
       */
      queryThreeLevel(value) {
        this.ruleForm.catid = '';
        console.log(value);
        cateComList({
          cate_parentid: value,
          cate_secondid: this.ruleForm.parentid
        }).then(response => {
          console.log(response);
          this.threeLevel = response.data
          this.threeLevel.unshift({id: "", cat_name: "请选择"})
        })
      },
      /**
       * 获取一级数据
       */
      getOneLevel() {
        cateComList({
          cate_parentid: 0,
          cate_secondid: 0
        }).then(response => {
          console.log(response);
          this.oneLevel = response.data
          this.oneLevel.unshift({id: "", cat_name: "请选择"})
        })
      },
      /**
       * 获取每条详情
       */
      getInfo(id) {
        subjectInfo(id).then(response => {
          console.log(response);
          this.ruleForm = response.data
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /**
       * 删除
       * @param index
       * @param row
       */
      handleDelete(index, row) {
        this.$confirm('是否要删除该菜单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          examDel(row.id).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            this.getOrganList(this.id);
          });
        }).catch(e => e);
      },
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange(val) {
        this.ruleForm.page_size = val;
        this.getOrganList();
      },
      /**
       * 页码
       * @param val
       */
      handleCurrentChange(val) {
        this.ruleForm.page = val;
        this.getOrganList();
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-link{ color: rgb(96, 98, 102); }
  .el-table /deep/ th>.cell {	display: flex; align-items: center; justify-content: center; }
</style>
<style>
  .dashboard-container { margin: 0 15px 15px 15px; padding: 30px; background-color: #fff;}
  /* 分类,章节数量开始 */
  .subject-classification,.chapter{ display: flex; }
  .subject-classification .el-row { width: 100% }
  .grid-content-span { width: 33%; display: flex; align-items: center;}
  .chapter-span{width: 33%; display: flex; align-items: center; justify-content: center; margin-left: 20px;}
  .subject-classification .el-row .grid-content-span1 { width: 10%; display: flex; align-items: center; justify-content: center; }
  .subject-classification .el-row, .subject-classification .bg-purple-dark { display: flex; }
  .subject-classification .el-row .el-col-8 .el-select { width: 100%; }
  .subject-classification .el-row .el-col-8:nth-child(3) { margin: 0px 20px; }
  /* 分类,章节数量结束 */

  /* 科目名称,搜索,重置开始 */
  .subject-name { margin-top: 20px; }
  .subject-name .el-col-12 { display: flex; }
  .subject-name .el-col-12 .grid-content { display: flex;	width: 100%; }
  .subject-name .el-col-12 .bg-purple-light { margin-left: 12.5%; }
  .subject-name .el-col-12 .bg-purple-light .el-button { width: 23.5%; }
  .subject-name .el-col-12 .grid-content .grid-content-span { width: 14%;	display: flex; align-items: center; justify-content: left; }

  /* 科目名称,搜索,重置结束 */

  /* 表格部分开始 */
  .Formsection { margin-top: 20px; }
  .Formsection .cell { display: flex; align-items: center; justify-content: center; }
  .Formsection .is-leaf { background-color: #f0f0f0; color: #333333; border-left: 1px solid #fff; font-size: 15px; }
  .Formsection .is-leaf:nth-child(1) { border-left: 0px; }
  /* 表格部分结束 */

  /* 分页开始 */
  .block{margin-top: 20px;display: flex;align-items: center;justify-content: center;}
  /* 分页结束 */
</style>
